<template>
 <div class="statisticalMap">
    <div class="analy_echarts" id="analyEcharts" ref="analyEcharts"></div>
    <p class="village_text">{{tetxType}}</p>
    <div class="village_color">
      <div class="village_color_box">
        <div style="background:#1b7dff" class="village_color_box_length"></div>
        <p class="village_color_box_title">>50</p>
      </div>
      <div class="village_color_box">
        <div style="background:#509CFF" class="village_color_box_length"></div>
        <p class="village_color_box_title">20-40</p>
      </div>
      <div class="village_color_box">
        <div style="background:#9FC8FF" class="village_color_box_length"></div>
        <p class="village_color_box_title">10-20</p>
      </div>
      <div class="village_color_box">
        <div style="background:#C5DEFF" class="village_color_box_length"></div>
        <p class="village_color_box_title">0-10</p>
      </div>
    </div>
  </div>
  <!-- <div class="analy_echarts" id="analyEcharts" ref="analyEcharts"></div> -->
</template>

<script>
// import * as echarts from 'echarts'
import pyxqcl from '@/assets/GeoJSON/pyxqcl.json'
import hdzz from '@/assets/GeoJSON/hdzz.json'
import qbx from '@/assets/GeoJSON/qbx.json'
import szz from '@/assets/GeoJSON/szz.json'
import ywz from '@/assets/GeoJSON/ywz.json'
import zlx from '@/assets/GeoJSON/zlx.json'
import yxnmc from '@/assets/GeoJSON/yxnmc.json'
export default {
  name: 'analyEcharts',
  data() {
    return {
      mapData: [
        {
          name: '师寨镇',
          code: '410725005',
          value: 15
        },
        {
          name: '桥北乡',
          code: '410725007',
          value: 35
        },
        {
          name: '祝楼乡',
          code: '410725006',
          value: 30
        },
        {
          name: '原武镇',
          code: '410725004',
          value: 50
        },
        {
          name: '韩董庄乡',
          code: '410725008',
          value: 100
        },
        {
          name: '原阳县农牧场',
          code: '410725019',
          value: 80
        }
      ],
      MapAdressName: 'XZQMC',
      mapVillage: '/business/statistics/home',
      center: [37747564, 3876624],
       tetxType: '举报数量/个'
    }
  },
  mounted() {
    // this.drawMap()
  },
  methods: {
    drawMap(mapData, mapjson, adressName, center) {
      var myChart = this.$echarts.init(document.getElementById('analyEcharts'))
      var name = 'xx'
      let mapCenter = center
      // if (!mapCenter) {
      //   mapCenter = this.center
      // }
      console.log('mapData=>', mapData)
      console.log('mapjson=>', mapjson)
      console.log('adressName=>', adressName)
      console.log('center=>', center)
      let MapJSON = mapjson
      this.$echarts.registerMap(name, MapJSON) //注册地图
      var option = {
        tooltip: {
          trigger: 'item',
          borderColor: '#fff',
          textStyle: {
            color: '#1B7DFF'
          },
          backgroundColor: 'rgba(255,255,255,0.8)',
          formatter: '{b} : {c}'
        },
        backgroundColor: '',
        visualMap: {
          type: 'continuous',
          min: 0,
          max: 50,
          left: 20,
          bottom: 30,
          text: '',
          orient: 'horizontal',
          inverse: true,
          itemWidth: 10,
          itemHeight: 300,
          calculable: false,
          inRange: {
            color: ['#C5DEFF', '#1B7DFF']
          },
          show: true
        },
        series: [
          {
            type: 'map',
            name: '举报数量',
            map: name,
            left: 10,
            nameProperty: adressName,
            center: mapCenter,
            coordinateSystem: 'geo',
            roam: true, //是否可以
            zoom: 1,
            aspectScale: 1,
            itemStyle: {
              borderColor: '#FFFFFF',
              borderWidth: 3
            },
            label: {
              normal: {
                color: '#FFFFFF',
                fontSize: 14,
                show: true
              },
              emphasis: {
                color: '#FFFFFF',
                fontSize: 14,
                show: true
              }
            },
            data: mapData
          }
        ]
      }

      //多图表自适应
      window.addEventListener('resize', function() {
        myChart.resize()
      })
      myChart.off('click')
      myChart.on('click', echartsMapClick)
      var _this = this
      function echartsMapClick(params) {
        let data = {
          code: params.data.code
        }
        let villageCode = params.data.code
        console.log('params=>', params)
        //点击地块关闭循环循环展示
        let villageCenter = []
        _this.MapAdressName = 'ZLDWMC'
        switch (params.name) {
          case '师寨镇':
            villageCenter = [37753828, 3885239]
            _this.$emit('VillageBack', szz, _this.MapAdressName, villageCenter, true)
            _this.$emit('initStatic', szz, villageCenter, _this.MapAdressName, villageCode, true)
            break
          case '桥北乡':
            villageCenter = [37741197, 3873863]
            _this.$emit('VillageBack', qbx, _this.MapAdressName, villageCenter, true)
            _this.$emit('initStatic', qbx, villageCenter, _this.MapAdressName, villageCode, true)
            break
          case '祝楼乡':
            villageCenter = [37745616, 3880820]
            _this.$emit('VillageBack', zlx, _this.MapAdressName, villageCenter, true)
            _this.$emit('initStatic', zlx, villageCenter, _this.MapAdressName, villageCode, true)
            break
          case '原武镇':
            villageCenter = [37755213, 3879698]
            _this.$emit('VillageBack', ywz, _this.MapAdressName, villageCenter, true)
            _this.$emit('initStatic', ywz, villageCenter, _this.MapAdressName, villageCode, true)
            break
          case '韩董庄镇':
            villageCenter = [37748564, 3872824]
            _this.$emit('VillageBack', hdzz, _this.MapAdressName, villageCenter, true)
            _this.$emit('initStatic', hdzz, villageCenter, _this.MapAdressName, villageCode, true)
            break
          case '原阳县农牧场':
            // villageCenter = [37755015.387983]
            // _this.$emit('isVillageBack')
            // _this.$emit('initStatic', yxnmc, villageCenter, _this.MapAdressName, villageCode)
            break
        }
      }
      myChart.setOption(option)
      // });
    }
  }
}
</script>

<style lang="less" scoped>
.statisticalMap {
  position: relative;
  width: 100%;
  height: 90%;
  .village_text {
    position: absolute;
    z-index: 99;
    bottom: 50px;
    left: 30px;
    font-size: 16px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #367cf5;
    line-height: 26px;
  }
  .village_color {
    position: absolute;
    width: 300px;
    height: 30px;
    // border: 1px solid red;
    bottom: -15px;
    left: 30px;
    z-index: 99;
    display: flex;
    .village_color_box {
      width: 25%;
      height: 100%;
      display: flex;
      // align-items: center;
      .village_color_box_length {
        width: 20px;
        height: 20px;
        margin-right: 3px;
        border-radius: 2px;
      }
      .village_color_box_title {
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #8399ab;
      }
    }
  }
}
.analy_echarts {
  width: 100%;
  height: 100%;
  // div {
  //   height: 100%;
  //   canvas {
  //     height: 100%;
  //   }
  // }
}
</style>
